<template>
  <div class="base-dist-picker">
    <el-cascader
      popper-class="location-cascader"
      clearable
      :props="props"
      :placeholder="placeholder"
      :options="options"
      :value="value"
      :disabled="disabled"
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
import { t } from '@src/locales'
import feLibCity from 'fe-lib-city';

export default {
  name: 'base-dist-picker',
  data() {
    return {
      options: [],
      props: {
        value: 'name',
        label: 'name',
        children: 'dist',
        checkStrictly: true,
      },
    }
  },
  props: {
    value: {
      type: Array,
      default: () => ([]),
    },
    placeholder: {
      type: String,
      default: t('common.placeholder.select'),
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clearValue() {
      this.$emit('input', []);
    },
    handleChange(value) {
      this.$emit('input', value);
    },
  },
  async mounted(){
    try {
      this.options = feLibCity || [];
    } catch (error) {
      console.error(error)
    }
    
  }
}
</script>

<style lang="scss">
  .location-cascader {

    .el-cascader-menu__item {
      display: flex;
      align-items: center;
      line-height: 21px;
      
      & > div {
        height: 21px;
        width: 100%;
        line-height: 21px;
        position: relative;
        padding-right: 8px;
      }
      
    }
    .el-cascader-menu {
      max-height: 204px;
    }
    
    .el-cascader-menu__item--extensible {
      font-family: "iconfont" !important;
      
      &::after {
        content: "";
        right: 5px;
      }
      
      .iconfont {
        color: #bfcbd9;
        position: absolute;
        right: 0px;
        top: 0;
      }
      
    }
    
  }
  
.base-dist-picker{
  .el-cascader__label{
    padding-left: 10px;
  }
  
  &:hover .el-input__inner{
    border-color: $input-border-hover-color;
  }
}
/** 
* @url {@link https://github.com/ElemeFE/element/pull/15611}
*/
// .location-cascader .el-cascader-node .el-radio {
//   display: none;
// }
</style>
